<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr><th>标题</th><th>价格</th><th>销量</th></tr>
</table>



<script>
    //创建自定义对象
    //实例化一个空对象
    let p1 = {};
    //动态给对象添加属性和方法
    p1.name = "张三";
    p1.age = 18;
    p1.run = function () {
        //this访问的是当前对象
        console.log(this.name + ":" + this.age);
    };
    //调用p1的run方法
    p1.run();

    //实例化一个自带属性的方法的对象
    let p2 = {
        name: "李四",
        age: 19,
        run: function () {
            console.log(this.name + ":" + this.age);
        }
    };

    p2.run();

    //通过对象封装一个商品的信息
    let product = {title:"小米手机",price:30000, num: 100};
    //通过数组装对象的形式，封装多个商品的信息
    let arr = [{title:"小米手机",price:30000, num: 100},{title:"小米手机12",price:20000, num: 100},{title:"小米手机33",price:40000, num: 130}];

    //得到也免得表格标签
    let table = document.querySelector("table");

    //相当于JAVA里的加强for
    for (let p of arr) {
        let tr = document.createElement("tr");
        let titleTD = document.createElement("td");
        let priceTD = document.createElement("td");
        let numTD = document.createElement("td");

        titleTD.innerText = p.title;
        priceTD.innerText = p.price;
        numTD.innerText = p.num;
        tr.append(titleTD, priceTD, numTD);
        table.append(tr);
    }




</script>

</body>
</html>
